<template>
  <div class="plugin-config-pay">
    <el-button type="primary" @click="form.open({})">
      {{ lang.t('common.create') }}
      <template #icon>
        <i class="iconfont mini icon-add-max"></i>
      </template>
    </el-button>
    <el-table :data="payModel.getList()" style="width: 100%; margin-top: 20px">
      <el-table-column :label="plugin.lang('pay.sort')" prop="sort" />
      <el-table-column :label="plugin.lang('pay.name')" prop="name" />
      <el-table-column :label="plugin.lang('pay.norm')">
        <template #default="scope">
          {{ scope.row.norm > 0 ? money(scope.row.norm) : '' }}
        </template>
      </el-table-column>
      <el-table-column :label="plugin.lang('pay.status')" prop="status">
        <template #default="scope">
          <el-tag :type="scope.row.status ? 'success' : 'danger'">
            {{ plugin.langTm('pay.status_text')[scope.row.status] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="plugin.lang('pay.cashbox')" prop="cashbox">
        <template #default="scope">
          <el-tag v-if="Number(scope.row.cashbox)">
            {{ plugin.langTm('pay.cashbox_text')[scope.row.cashbox] }}
          </el-tag>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="200">
        <template #default="scope">
          <div style="text-align: right">
            <el-button type="primary" size="small" @click="form.open(scope.row)">{{ lang.t('common.update') }}</el-button>
            <el-popconfirm
              :title="lang.t('alert.delete')"
              @confirm="payModel.del(scope.row.id)"
              confirmButtonType="danger"
              placement="left"
              hideIcon
            >
              <template #reference>
                <el-button type="danger" size="small">{{ lang.t('common.delete') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Form ref="form" />
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import payModel from '../../model/pay'

import Form from './form'

export default {
  components: {
    Form
  },
  setup() {
    // 插件
    const plugin = app.plugin.index

    // 加载数据
    payModel.get().then(res => {
      // 快速创建
      if(res.length == 0) {
        app.ui.alert(
          plugin.lang('alert.pay_default'), 
          plugin.lang('alert.pay_default_title')
        ).then(() => {
          // 创建默认支付方式
          payModel.default(plugin.langTm('pay.default'))
        })
      }
    })

    // 表单
    const form = ref(null)

    return {
      lang: app.lang,
      money: app.money,
      plugin,
      payModel,
      form
    }
  }
}
</script>